<template>
  <el-scrollbar height="100%">
    <div v-loading="pageLoading" class="PublicizeEvaluate">
      <div class="header">
        <div class="header-title">
          <div class="title-l">
            <div class="otw-1">{{ orderDetails.order.courseName }}</div>
            <!-- <div class="status">待确认</div> -->
          </div>
          <div class="title-r">{{ orderDetails.compositeMark ? orderDetails.compositeMark.toFixed(2) : '' }}</div>
        </div>
        <div class="header-bottom">
          <div class="cover-l">
            <el-image style="width: 364px;height: 231px;" :src="getImageUrl(courseDetils.courseData.coverUrl)"
              fit="cover">
              <template #error>
                <img src="/images/course_default.png" style="width: 100%; height: 100%;">
              </template>
            </el-image>
            <div class="cover-b">
              <img src="@/assets/images/front/clock.png">{{ format(orderDetails.order.appointTime) }} {{
                orderDetails.order.timeType == 1 ? '下午场' : '上午场'
              }}
            </div>
            <div class="cover-b">
              <img style="width: 31px;" src="@/assets/images/front/people_num.png">{{ orderDetails.order.listenerCount }}
            </div>
          </div>
          <div class="header-main">
            <div class="label" style="margin-bottom: 10px;">订单号：{{ orderDetails.order.uniqueId }}</div>
            <div class="course-info">
              <div class="common-label">作者信息</div>
              <el-row>
                <el-col :span="8">
                  <div class="info">
                    作者：<span>{{ orderDetails.expert.name }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    所在机构：<span>{{ orderDetails.expert.unit }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    作者职称：<span>{{ orderDetails.expert.expertTitle }}</span>
                  </div>
                </el-col>
              </el-row>

              <!-- <div class="info">
                <span>联系人：</span>{{ orderDetails.order.linkMan }}
              </div>
              <div class="info">
                <span>联系人电话：</span>{{ orderDetails.order.linkManTel }}
              </div>
              <div class="info">
                <span>预约时间：</span>
                {{ format(orderDetails.order.appointTime) }}
                {{ orderDetails.order.timeType == 1 ? '下午场' : '上午场' }}
              </div> -->
            </div>
            <div class="course-info">
              <div class="common-label">订单信息</div>
              <el-row>
                <el-col :span="8">
                  <div class="info">
                    地点：<span>{{ orderDetails.order.location }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    听众人数：<span>{{ orderDetails.order.listenerCount }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    联系人：<span>{{ orderDetails.order.order }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    联系人电话：<span>{{ orderDetails.order.linkManTel }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    申请单位：<span>{{ orderDetails.order.applicants }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    提交时间：<span>{{ format(orderDetails.order.createTime) }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info">
                    预约说明：<span>{{ orderDetails.order.appointDescribe }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title-label"><span>课程评价</span>/Expert evaluation</div>
        <div class="eav-list">
          <div v-for="(evaItem, evaIndex) in orderDetails.evaluates" :key="evaIndex" class="eva-item">
            <img class="item-avator" src="@/assets/images/personal-center/default_avatar.png">
            <div class="item-r">
              <div class="item-header">
                <div class="item-info">
                  <div class="name">{{ evaItem.name }}</div>
                  <!-- <div class="position">所在机构副教授</div> -->
                </div>
                <div class="scroe">
                  <div class="score-num">{{ evaItem.averageMark ? evaItem.averageMark.toFixed(2) : '' }}</div>
                  <div>综合评分</div>
                </div>
              </div>
              <div class="eva-content">
                <div class="content-title">
                  <span>评价时间：{{ moment(evaItem.createTime).format('YYYY-MM-DD HH:mm') }}</span>
                  <div @click="changeExpand(evaItem)">
                    <span>{{ evaItem.isExpand ? '收起' : '展开' }}评价细则</span>
                    <span :class="['icon', evaItem.isExpand ? 'open' : '']">
                      <el-icon>
                        <ArrowRightBold />
                      </el-icon>
                    </span>
                  </div>
                </div>
                <!--  -->
                <el-collapse-transition>
                  <div v-show="evaItem.isExpand" :class="['content-main']">
                    <div v-for="(quesItem, quesIndex) in evaItem.evaluates" :key="quesIndex" class="ques-group">
                      <div class="ques-title" :style="{ width: quesItem.evaluateType == 1 ? '100%' : '' }">
                        {{ quesIndex + 1 }}.{{ quesItem.questions }}
                      </div>
                      <div v-if="quesItem.evaluateType != 1" class="mark-rate">
                        <el-rate disabled v-model="quesItem.mark" size="large" />
                        <div style="display: inline-block;height: 100%;vertical-align: text-bottom">{{ quesItem.mark }}.0
                        </div>
                      </div>
                      <div v-else style="width: 100%;">
                        <div class="ques-opinion">{{ quesItem.content }}</div>
                      </div>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </div>
          <el-empty v-if="!orderDetails.evaluates || orderDetails.evaluates.length == 0" description="暂无数据" />
        </div>
        <div class="button">
          <el-button type="primary" @click="router.back()" style="color: #8B8B8B;" text bg>返 回</el-button>
        </div>
      </div>
      <!-- <div class="pagination">
        <el-pagination prev-text="上一页" next-text="下一页" background layout="prev, pager, next" :total="1000" />
      </div> -->
    </div>
  </el-scrollbar>
</template>
<script>
export default { name: 'PublicizeEvaluate' }
</script>
<script setup>
import { ref } from 'vue';
import { ArrowRightBold } from '@element-plus/icons-vue'
import { http } from '@/utils/http/index.js'
import { getImageUrl } from '@/utils/index.js'
import { useRoute, useRouter } from 'vue-router';
import moment, { format } from '@/plugins/moment.js'

const router = useRouter()
const route = useRoute()

// 切换展开状态
const changeExpand = (evaItem) => {
  evaItem.isExpand = !evaItem.isExpand
}
/**获取订单信息 */
const pageLoading = ref(false)
const orderDetails = ref({ order: {}, expert: {}, evaluates: [] })
const getOrder = () => {
  pageLoading.value = true
  http.$GET('/Preach/GetPreachOrderDetail', { id: route.query.id }).then(res => {
    if (res.isError) return
    if (!res.result.evaluates) res.result.evaluates = []
    res.result.evaluates.forEach(el => {
      el.isExpand = false
    })
    orderDetails.value = res.result
    getCourse()
  }).finally(() => pageLoading.value = false)
}

getOrder()

const courseDetils = ref({ courseData: {} })
const getCourse = () => {
  http.$GET('/Preach/GetPreachCourseDetail', { id: orderDetails.value.order.courseId, }).then(res => {
    if (res.isError) return
    courseDetils.value = res.result
  })
}
</script>
<style lang='scss' scoped>
.PublicizeEvaluate {
  font-family: PingFang SC-Regular, PingFang SC;

  .header {
    background-color: #fff;
    margin-bottom: 24px;

    .header-title {
      height: 72px;
      padding: 0 36px;
      border-bottom: 2px solid #EAEAEA;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;

      .title-l {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
        display: flex;
        font-weight: bold;

        .otw-1 {
          // max-width: 76%;
          margin-right: 12px;
        }

        .status {
          padding: 2px 8px;
          font-size: 16px;
          font-weight: 400;
          color: #3D6FDE;
          border: 1px solid #3D6FDE;
          background-color: #EAF3F9;

        }
      }

      .title-r {
        font-size: 35px;
        font-weight: 600;
        color: #F0BB69;
      }
    }

    .header-bottom {
      padding: 21px 23px;
      display: flex;
      gap: 24px;

      .cover-l {
        .cover-b {
          margin-top: 15px;
          display: flex;
          align-items: center;
          gap: 7px;
          font-size: 18px;
          color: #B54653;

          img {
            width: 22px;
            height: 22px;
          }
        }
      }

      .header-img {
        width: 364px;
        height: 228px;
        display: block;
        object-fit: cover;
      }

      .header-main {
        font-size: 20px;
        color: #333333;
        flex: 1;

        .label {
          color: #7C7C7C;
        }

        :deep(.el-col) {
          margin-bottom: 20px;
        }

        .course-info {
          background: #F8F9FA;
          padding: 15px 23px;
          overflow: auto;
          margin-bottom: 10px;

          .common-label {
            font-size: 18px;
            font-weight: bold;
            color: #505050;
            margin-bottom: 15px;
          }

          .info {
            font-size: 18px;
            // margin-bottom: 20px;
            display: flex;
            color: #7C7C7C;

            span {
              flex: 1;
              width: 0;
              color: #0B0B0B;
            }
          }
        }
      }
    }
  }

  .content {
    flex: 1;
    background-color: #fff;

    .title-label {
      font-size: 16px;
      color: #A7A7A7;
      border-bottom: 2px solid #EAEAEA;

      padding: 16px 32px 16px;

      span {
        font-size: 20px;
        color: #000;
        font-weight: bold;
      }
    }

    .eav-list {
      padding: 0 36px 80px;

      .eva-item {
        padding: 22px 0 24px;
        border-bottom: 2px solid #EAEAEA;
        display: flex;
        gap: 14px;

        .item-avator {
          width: 68px;
          height: 68px;
          border-radius: 50%;
          object-fit: cover;
        }



        .item-r {
          flex: 1;

          .item-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;

            .item-info {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .name {
                height: 100%;
                font-size: 23px;
                font-weight: 500;
                color: #212121;
                display: flex;
                align-items: center;
              }

              .position {
                font-size: 16px;
                font-weight: 400;
                color: #515151;
              }
            }

            .scroe {
              font-size: 17px;
              font-weight: 400;
              color: #626262;
              display: flex;
              flex-direction: column;
              text-align: center;

              .score-num {
                font-size: 35px;
                font-weight: 600;
                color: #F0BB69;
              }
            }
          }

          .eva-content {
            font-size: 18px;
            font-weight: 400;

            .content-title {
              display: flex;
              justify-content: space-between;
              margin-bottom: 14px;
              font-size: 18px;
              color: #626262;

              >div {
                display: flex;
                align-items: center;
                cursor: pointer;
                user-select: none;

                .icon {
                  color: var(--theme-color);
                  margin-left: 2px;
                  transition: all .3s;
                  position: relative;
                  top: 3px;

                  &.open {
                    top: 0px;
                    transform: rotate(90deg);
                  }
                }
              }
            }

            .content-main {
              background-color: #F7F7F7;
              font-size: 20px;
              font-weight: 400;
              color: #333333;
              padding: 28px;

              :deep(.el-col) {
                align-items: center;
              }

              :deep(.el-rate) {
                .el-rate__icon {
                  font-size: 25px;
                }
              }

              .beizhu {
                font-size: 18px;
                font-weight: 500;
                color: #6E6E6E;
                margin: 17px 0 4px;
              }

              .ques-group {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 20px;

                .ques-title {
                  width: 66%;
                }

                .mark-rate {
                  width: 32%;
                }

                .ques-opinion {
                  border-radius: 6px;
                  background-color: #fff;
                  min-height: 60px;
                  padding: 10px;
                  font-size: 16px;
                }
              }
            }
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .button {
    text-align: center;
    padding-bottom: 32px;

    :deep(.el-button) {
      border-radius: 26px;
      width: 129px;
      height: 39px;
    }
  }

  .pagination {
    background-color: #fff;
    padding: 30px 0 20px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>
